<template>
  <!-- 顶部 -->
  <header class="app-header">
    <div style="width: 200px; min-width: 200px; max-width: 200px">
      <img src="@/assets/ETE-512-with-name-right-en.png" alt="Logo" class="logo" />
    </div>
    <div class="user">
      <div class="user-info">欢迎&nbsp; {{ username }} &nbsp;!</div>
      <!-- Vuetify 提供的 v-spacer 组件用于在元素之间添加可伸缩的空间。 -->
      <v-spacer></v-spacer>
      <div v-if="devName !== ''" style="margin-right: 1vw; color: white;">当前使用设备：{{ devName }}</div>
      <v-icon v-if="type === 'signal'" color="green" style="margin-right: 1vw">mdi-signal-cellular-3</v-icon>
      <v-icon v-if="type === 'wifi' && strength === 1" color="red" style="margin-right: 1vw;">mdi-wifi-strength-1</v-icon>
      <v-icon v-if="type === 'wifi' && strength === 2" color="orange" style="margin-right: 1vw;">mdi-wifi-strength-2</v-icon>
      <v-icon v-if="type === 'wifi' && strength === 3" color="green" style="margin-right: 1vw;">mdi-wifi-strength-3</v-icon>
      <v-icon v-if="type === 'wifi' && strength === 4" color="green" style="margin-right: 1vw;">mdi-wifi-strength-4</v-icon>
      <v-icon v-if="type === 'ethernet'" color="green" style="margin-right: 1vw;">mdi-ethernet</v-icon>
      <v-btn @click="pingServer">
        本地连接
        <template v-if="loading">
          <i class="mdi mdi-loading mdi-spin"></i>
        </template>
        <template v-else>
          <v-icon>mdi-link</v-icon>
        </template>
      </v-btn>
      <v-btn @click="dialog = true" class="logout-btn" style="background-color: red; color: white; margin-right: 10px;">
        退出
        <v-icon>mdi-logout</v-icon>
      </v-btn>
      <v-dialog
          v-model="dialog"
          persistent
          width="300"
          content-class="text-center">
        <v-card>
          <v-card-title class="headline text-h5">
            确认退出吗？
          </v-card-title>
          <v-card-actions>
            <v-spacer></v-spacer>
            <v-btn
                color="blue"
                text
                @click="dialog = false">
              取消
            </v-btn>
            <v-btn
                color="error"
                text
                @click="logout">
              确认
            </v-btn>
          </v-card-actions>
        </v-card>
      </v-dialog>
    </div>
  </header>
</template>

<script>
// 导入 jwt-decode 用于解码 JWT 令牌，导入 axios 用于进行 HTTP 请求。
import jwt_decode from "jwt-decode";
import axios from "axios";

export default {
  name: 'Header-component',
  mounted() {
    setTimeout(()=> {
      this.pingServer();
    }, 120);
  },

  // 定义组件的数据，获取本地存储中的 token 和 username，并解码 JWT 令牌，返回初始状态的变量。
  data() {
    const token = localStorage.getItem('token');
    const decodedToken = jwt_decode(token);
    const username = localStorage.getItem('userName');
    return {
      username, token, decodedToken,
      dialog: false,
      loading: false, // 判断是否正在连接设备
      type: '',
      devName: '',
      strength: 0,
      interbalId: '',
    };
  },
  methods: {
    // 定义 logout 方法，用于处理用户退出。
    logout() {
      // window.electronAPI.disconnectRemote();
      // 调用 $refresh 方法（可能是一个自定义的方法），并处理其返回的 Promise。
      this.$refresh()
          .then(response => {
            // 如果 $refresh 返回成功，使用 axios 发送一个登出请求，携带 JWT 令牌作为认证。
            if (response === 'success') {
              axios.post(`${this.$serverUrl}/api/auth/logout`, {}, {
                headers: {
                  'X-Authorization': `Bearer ${this.token}`
                }
              })
                  .then(response => {
                    // 如果登出请求成功，清除所有相关的本地存储项，并使用 $router.push 方法重定向到首页
                    if (response.status === 200) {
                      localStorage.removeItem('refreshToken');
                      localStorage.removeItem('userName');
                      localStorage.removeItem('token');
                      localStorage.removeItem('room');
                      localStorage.removeItem('keepLogin');
                      localStorage.removeItem('sn');
                      window.electronAPI.closeN2N();
                      this.$router.push('/');
                    }
                  })
                  .catch(error => {
                    console.log(error);
                  })
            } 
            // 如果 $refresh 返回的不是成功，清除本地存储并重定向到首页。
            else {
              localStorage.clear();
              this.$router.push('/');
            }
          })

    },
    // connectEnd 方法设置 loading 为 false，表示连接过程结束。
    connectEnd() {
      this.loading = false;
    },

    // pingServer 方法检查是否正在加载，如果是，则发出错误消息。如果没有，调用 reconnectServer 方法并设置 loading 为 true。
    pingServer() {
      if (this.loading) {
        this.$emit('errMsg', '连接设备中，请稍后重试！')
        return
      }
      window.electronAPI.reconnectServer();
      this.loading = true;
    },

    // setNetwork 方法用于根据传入的数据设置网络类型和信号强度。如果 data 是空数组，则清空设备名称。根据 data.type 和 data.rssi 设置相应的网络类型和信号强度。
    setNetwork(data) {
      console.log(data)
      this.type = '';
      this.strength = 0;
      if (data === []) {
        this.devName = '';
        return;
      }
      if (data.type === 2) this.type = 'signal';
      else if (data.type === 1) {
        this.type = 'wifi';
        console.log(data.rssi)
        if (data.rssi >= -45) this.strength = 4;
        else if (data.rssi >= -60) this.strength = 3;
        else if (data.rssi >= -75) this.strength = 2;
        else this.strength = 1;
      } else this.type = 'ethernet';
    }
  }
}
</script>

<style scoped>
.app-header {
  width: 100%;
  height: 60px;
  min-height: 60px;
  max-height: 60px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: #1976D2;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
}

.user {
  display: flex;
  align-items: center;
  width: 100%;
}

.user-info {
  color: white;
  margin-right: 3vw;
}

.logout-btn {
  //margin-left: 10vh;
}

.logo {
  height: 30px;
  margin-left: 31px;
}

.v-card-actions {
  justify-content: flex-end; /* 使得按钮在右下角 */
}

.v-btn + .v-btn {
  margin-left: 10px; /* 确认和取消按钮间隔10px */
}
@media (max-width: 950px) {
  .user-info {
    display: none;
  }
}
</style>
